<div>
  <div class="nav">
    <a routerLink="/">首页</a>
    <a routerLink="/user/home">我的文件</a>
    <label>{{ name }}的历史记录</label>
  </div>
  <div *ngIf="!loading">
    <table>
      <tr>
        <th>预览</th>
        <th>文件名</th>
        <th>文件描述（双击修改）</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
      <tr *ngFor="let item of data.list">
        <td class="text-center">
          <a routerLink="/workspace" [queryParams]="{ id: item.id, fileId: item.fileId }">
            <img [appImgAuthSrc]="item.image" />
          </a>
        </td>
        <td>
          {{ item.name }}
        </td>
        <td>
          <div *ngIf="!item.edited" (dblclick)="onEditDesc($event, item)">{{ item.desc }}</div>
          <textarea
            *ngIf="item.edited"
            class="input"
            rows="4"
            [(ngModel)]="desc"
            (mousedown)="$event.stopPropagation()"
            (keydown)="onEnterDesc($event)"
            title="回车：保存修改；Ctrl + 回车：换行"
            required
          ></textarea>
        </td>
        <td>{{ item.createdAt | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
        <td width="140">
          <a class="mr15" routerLink="/workspace" [queryParams]="{ id: item.id, fileId: item.fileId }">
            进入编辑
          </a>
          <a class="mr15" (click)="onDel(item)">
            删除
          </a>
        </td>
      </tr>
      <tr *ngIf="!data.count">
        <td class="gray text-center" colspan="10">
          暂无历史记录，VIP会员保存文件将保存历史记录。
          <a routerLink="/workspace" [queryParams]="{ id: search.fileId }">去编辑</a>
        </td>
      </tr>
    </table>

    <div class="pv10 mb30" *ngIf="data.count">
      <ui-pagination
        [(pageIndex)]="search.pageIndex"
        [(pageCount)]="search.pageCount"
        [pageTotal]="data.count"
      ></ui-pagination>
    </div>
  </div>
  <ui-loading
    *ngIf="loading"
    class="mt50"
    tip="正在加载，请稍等（个人云服务器资源小，人多访问可能慢，欢迎资助）..."
  ></ui-loading>

  <div *ngIf="!isVip" class="text-center gray mt50">
    <div class="inline text-left">
      <div>
        由于个人云服务器资源有限，文件历史记录仅对VIP开放！
        <a class="hover" (click)="showVip = true">开通VIP</a>
      </div>
      <div class="mt10">1. 本着开源精神，免费提供一些服务，希望大家多多参与支持</div>
      <div>2. 目前仅只有1台云服务器，CPU、内存、磁盘、网络都有限</div>
      <div>3. 单台服务器还需要支撑其他项目</div>
      <div>4. 多少期望能增加点绵薄的收入，维持开销也好</div>
    </div>
  </div>
</div>

<div class="modal" *ngIf="showVip">
  <div class="modal-content">
    <div class="modal-header pointer" uiDivMove [isHead]="true">
      <div class="caption">开通VIP</div>
      <i class="fr iconfont icon-close" (click)="showVip = null"></i>
    </div>
    <div class="modal-body">
      <p>
        感谢您的支持，目前属于推广试用阶段，为了将更多精力放在功能开发和维护上，暂时没用制定详细的计费规则，暂定参与或资助可开通VIP！
      </p>
      <p>请先联系：</p>
      <p>邮箱：alsmile123@qq.com</p>
      <p>微信：alsmile123</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="button" (click)="showVip = null">确定</button>
    </div>
  </div>
</div>
